<!-- 搜索栏 -->
<form nz-form [formGroup]="searchForm" class="ant-advanced-search-form" >
    <div nz-row [nzGutter]="24" style="white-space: nowrap; ">
        <div nz-col [nzSpan]="6" class="search-col">
            <div nz-row style="justify-content: center; vertical-align: middle;">
                <nz-form-label class="search-form-label" nzFor="clientId">客户端ID</nz-form-label>
                <nz-form-control class="search-form-control" style="justify-content: center;">
                    <input class="default-input" nz-input formControlName="clientId" placeholder="输入ClientID"/>
                    <div *ngIf="submitted && fm['clientId'].invalid">
                        <div *ngIf="fm['clientId'].errors?.['maxlength']">客户端ID长度不超过20</div>
                    </div>
                </nz-form-control>
            </div>
        </div>
        <div nz-col [nzSpan]="6" class="search-col">
            <div nz-row>
                <nz-form-label class="search-form-label" nzFor="clientName">客户端名称</nz-form-label>
                <nz-form-control class="search-form-control">
                    <input class="default-input" nz-input formControlName="clientName" placeholder="输入ClientName"/>
                    <div *ngIf="submitted && fm['clientName'].invalid">
                        <div *ngIf="fm['clientName'].errors?.['maxlength']">客户端名称长度不超过20</div>
                    </div>
                </nz-form-control>
            </div>
        </div>
        <div nz-col [nzSpan]="12">
            <div nz-row >
                <nz-col class="search-button-col">
                    <app-search-button [search]="true" (searchEvent)="onSearch()" [reset]="true"
                        (resetEvent)="onReset()" [create]="true"
                        (createEvent)="onCreate(modalTitle, modalContent)"></app-search-button>
                </nz-col>
            </div>
        </div>
    </div>
</form>

<!-- 客户端Table -->
<div nz-row style="margin-top: 4px; white-space: nowrap;" class="table-area">
    <nz-table #expandTable nzShowPagination [nzData]="clients" nzTableLayout="fixed" [nzFrontPagination]="false"
        [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="total" (nzQueryParams)="onPageParamChange($event)">
        <thead>
            <tr>
                <th>客户端ID</th>
                <th>客户端名称</th>
                <th>授权类型</th>
                <th>授权范围</th>
                <th>重定向Uri</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr *ngFor="let client of clients">
                <td>{{client.clientId}}</td>
                <td>{{client.clientName}}</td>
                <td nzEllipsis="true" nz-tooltip nzTooltipTitle="{{client.authorizationGrantTypes.join(',')}}">{{client.authorizationGrantTypes.join(",")}}</td>
                <td nzEllipsis="true" nz-tooltip nzTooltipTitle="{{client.scopes.join(',')}}">{{client.scopes.join(',')}}</td>
                <td nzEllipsis="true" nz-tooltip nzTooltipTitle="{{client.redirectUris.join(',')}}">{{client.redirectUris.join(',')}}</td>
                <td [nzEllipsis]="true" style="overflow: hidden;" nzRight>
                    <button nz-button class="action-button normal-button" (click)="onDetail(detailTitle, detailContent, client)">详情</button>
                    <button nz-button class="action-button normal-button" (click)="onUpdate(client, modalTitle, modalContent)">编辑</button>
                    <button nz-button class="action-button delete-button" (click)="handleDelete(client.clientId)">删除</button>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>

<!-- 新建,编辑对话框 -->
<nz-modal class="edit-modal">
    <ng-template #modalTitle style="padding: 10px 20px;">
        {{editTitle}}
        @if (clientName != null) {
          <span style="color: rgb(55, 134, 90);">{{clientName}}</span>
        }
    </ng-template>

    <ng-template #modalContent>
        <app-add-client [modeSubject]="modeSubject" (addClientEvent)="onAddClientEvent($event)"></app-add-client>
    </ng-template>
</nz-modal>

<nz-modal>
    <ng-template #detailTitle>客户端详情:<span style="color: rgb(55, 134, 90);">{{clientName}}</span></ng-template>
    <ng-template #detailContent>
      <app-client-detail (detailEvent)="onDetailEvent($event)" [clientSubject]="clientSubject"></app-client-detail>
    </ng-template>
  </nz-modal>